<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>04_样式类名的操作</title>
		<!-- 样式类名操作：针对css3、添加、移除切换的元素类名操作
			 addClass()        有参：1个参和多个参
								语法：addClass("类名")
								<p class="类名">
								语法：addclass("类名1 类名2");
								<p class="类名1 类名2">
								功能:匹配元素集合中的所有元素
									添加一个或者多个类名操作
								理解：元素添加存在的样式
			 remveClass()		功能:匹配元素集合中的所有元素
								移除一个或者多个类名操作
			 toggleClass()		功能:如果元素有类名移除、没有则添加
			 hasClass()			功能：检查匹配元素集合中是否包含指定类名
									  返回值bool
		 -->
		 <!-- 要求： 1.jq引入
					2.html:     div id="targetElement"
								4个按钮	id="addClassBtn"
										id="removeClassBtn"
										id="toggleClassBtn"
										id="hasClassBtn"
								div id="resultArea"
					3.css:      .bgcolort{300*300 背景色随意}
								.broders{10个像素实线红色边框  倒角画圆}
		  -->
		 <script src="../js/jquery-1.11.1.js"></script>
		 <style>
			.bgColor{
				width: 300px;
				height: 300px;
				background: #00aaff;
			}
			.borders{
				border: 10px solid red;
				border-radius: 300px;
			}
		 </style>
	</head>
	<body>
		<div id="targetElement"></div>
		<button id="addClassBtn">添加类名</button>
		<button id="removeClassBtn">移出类名</button>
		<button id="toggleClassBtn">切换类名</button>
		<button id="hasClassBtn">检查类名是否存在</button>
		<div id="resultArea"></div>
		<script>
			// 1.点击 添加类名 按钮添加效果【样式】300*300 背景色蓝色
			$("#addClassBtn").click(function(){
				// div添加样式
				$("#targetElement").addClass("bgColor borders");
				$("#resultArea").html("<h4>添加样式类名:bgcolor</h4>")
			});
			// 2.点击 添加类名 按钮 添加效果【样式】
			// 300*300 背景色蓝色色 圆外层 10px红色框
			//3.点击 移除类名 按钮 添加效果【样式】300*300 背景色蓝色
			$("#removeClassBtn").click(function(){
				$("#targetElement").removeClass("borders");
				$("#resultArea").html("<h4>删除样式类名:borders</h4>")
			});
			// 4.点击 切换类名 按钮添加效果【样式】
			// 300*300 背景色蓝色色 圆外层 10px红色框
			/*  $("#toggleClassBtn").click(function(){
				$("#targetElement").toggleClass("borders");
				$("#resultArea").html("<h4>切换样式类名:borders</h4>")
			});*/
			// 5.点击 切换类名 按钮 添加效果【样式】
			// 去掉 300*300 背景色蓝色
			$("#toggleClassBtn").click(function(){
				$("#targetElement").toggleClass("bgColor borders");
				$("#resultArea").html("<h4>切换样式类名:bgColor</h4>")
			});
			// 6.检查类名是否存在:true存在  false不存在
			$("#hasClassBtn").click(function(){
				//div添加样式--存在样式:类名
				var hc=$("#targetElement").hasClass("borders");
				$("#resultArea").text("检查当前样式是否存在："+hc);
			});
		</script>
	</body>
</html>